<template>
    <GhNavBar title="官方客服"  />
  <div class="customerService">
    <div class="chat-container">
        <!-- 在此处添加聊天内容 -->
        <p>扫码支付进行聊天</p>
        <img src="@/assets/客服.jpg" alt="">
      </div>
   
    <div class="input-container">
        <van-field
          v-model="message"
          placeholder="请输入消息"
          clearable
          @clear="clearInput"
          left-icon="comment-o"
          @keydown.enter="sendMessage"
          autofocus
        >
        </van-field>
        <van-button type="primary" @click="sendMessage">发送</van-button>
      </div>
  </div>
</template>

<script setup>
import {ref,onMounted, onUnmounted ,reactive, nextTick } from "vue"

const message=ref('')

const clearInput=() =>{
      // 清空输入框
     message.value = '';
}
//发送消息按钮
const sendMessage=()=>{
     // 处理发送消息的逻辑
      // 可以根据需求将消息展示在聊天内容区域
      if (message.value.trim() !== '') {
        // 执行发送消息的操作
        console.log(message.value)
      }
      // 清空输入框
     clearInput();
   
}


</script>

<style lang="scss" scoped>
.customerService{
    height: 100vh;
    padding-top: 48px;
    background-color:var(--gh-bg);
    border-radius: 8px;
    /* overflow: hidden; */
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
   
    .chat-container {
       flex: 1;
       max-height: 70vh;
       overflow: auto;
       text-align: center;
       padding: 16px;
       p{
         margin:40px auto;
         font-size: 14px;
         font-family: '宋体';
         color: var(--gh-price);
      }
      img{
        position: relative;
        height: 200px;
        height: 250px;
      }
     }
    .input-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px;
     position: sticky;
     bottom: 0;
     background-color: #f5f5f5;
     .van-field {
      flex: 1;
      height: 48px;
      margin-right: 8px;
     }
     .van-button {
        min-width: 80px;
        height: 44px;
        border-radius: 10px;
      }
    }

}

</style>
